<div class="content">
    <div id="example_title">
        <h1>Grid Toolbar</h1>
        Grid uses w2toolbar as its toolbar. Which means you can add, remove, disable, enable, etc. buttons very easily. There are
        some default controls that you can also use. Below is the grid that has all possible default controls.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="grid" style="width: 800px; height: 400px;"></div>

<!--CODE-->
<script type="module">
import { w2grid, w2alert } from '__W2UI_PATH__'

let grid = new w2grid({
    name: 'grid',
    box: '#grid',
    show: {
        toolbar: true,
        footer: true,
        toolbarAdd: true,
        toolbarDelete: true,
        toolbarSave: true,
        toolbarEdit: true
    },
    searches: [
        { field: 'lname', label: 'Last Name', type: 'text' },
        { field: 'fname', label: 'First Name', type: 'text' },
        { field: 'email', label: 'Email', type: 'text' }
    ],
    columns: [
        { field: 'recid', text: 'ID', size: '50px', sortable: true, attr: 'align=center' },
        { field: 'lname', text: 'Last Name', size: '30%', sortable: true },
        { field: 'fname', text: 'First Name', size: '30%', sortable: true },
        { field: 'email', text: 'Email', size: '40%' },
        { field: 'sdate', text: 'Start Date', size: '120px' }
    ],
    onAdd: function (event) {
        w2alert('add');
    },
    onEdit: function (event) {
        w2alert('edit');
    },
    onDelete: function (event) {
        console.log('delete has default behavior');
    },
    onSave: function (event) {
        w2alert('save');
    },
    records: [
        { recid: 1, fname: 'Jane', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 6, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 7, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 8, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 9, fname: 'Sergei', lname: 'Rachmaninov', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 20, fname: 'Jill', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 21, fname: 'Frank', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 22, fname: 'Peter', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 23, fname: 'Andrew', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 24, fname: 'Manny', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 25, fname: 'Ben', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 26, fname: 'Doer', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 27, fname: 'Shashi', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 28, fname: 'Av', lname: 'Rachmaninov', email: 'jdoe@gmail.com', sdate: '4/3/2012' }
    ]
})
</script>
